<template>
  <div class="main">
    <!-- 左侧信息面板 -->
    <div class="left-panel">
      <!-- 产品完成情况卡片 -->
      <el-card>
        <div slot="header" class="panel-title">
          <i class="fa fa-bar-chart"></i>产品完成情况
        </div>
        <div class="stats-card">
          <div></div>
          <div class="stats-item">
            <div class="chart-container">
              <RingChart
                :data="chartData"
                :radius="'70%'"
                label-show
              ></RingChart>
            </div>
          </div>
          <div class="stats-item">
            <div class="chart-container">
              <RingChart
                :data="chartData"
                :radius="'70%'"
                label-show
              ></RingChart>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 合计卡片 -->
      <el-card>
        <div slot="header" class="panel-title">
          <i class="fa fa-calculator"></i>合计
        </div>
        <div class="stats-card">
          <div></div>
          <div class="stats-item">
            <!-- <span class="num">77%</span> -->
            <!-- <span class="desc">本月完成率</span> -->
            <div class="chart-container">
              <!-- <ring-chart
                :data="chartData"
                :radius="'70%'"
                label-show
              ></ring-chart> -->
              <ring-chart
                :data="chartData"
                :radius="'70%'"
                label-show
              ></ring-chart>
            </div>
          </div>
          <div class="stats-item">
            <div class="chart-container">
              <RingChart
                :data="chartData"
                :radius="'70%'"
                label-show
              ></RingChart>
            </div>
          </div>
        </div>
        <div class="stats-cont">
          <div class="stats-cont-span">
            <span>本月出厂商品 48个</span>
            <span>上月出厂商品 48个</span>
          </div>
          <div class="stats-cont-span">
            <span>本月出厂商品 48个</span>
            <span>上月出厂商品 48个</span>
          </div>
          <div class="stats-cont-span">
            <span>本月出厂商品 48个</span>
            <span>上月出厂商品 48个</span>
          </div>
          <div class="stats-cont-span">
            <span>本月出厂商品 48个</span>
            <span>上月出厂商品 48个</span>
          </div>
        </div>
      </el-card>

      <!-- 设备接入实况卡片 -->
      <el-card>
        <div slot="header" class="panel-title">
          <i class="fa fa-plug"></i>设备接入实况
        </div>
        <ContentReal></ContentReal>
      </el-card>
    </div>

    <!-- 中间3D/设备区 -->
    <div class="center-area">
      <div class="device-container">
        <!-- <LingChart
          :chartData="chartData1"
          title="完工数量"
          yAxisName="数量"
        ></LingChart> -->
        <BarChart
          :chartData="chartData2"
          title="日损伤填口数"
          yAxisName="数量"
        ></BarChart>
      </div>
    </div>
    <!-- 右侧能源卡片区 -->
    <!-- <div class="right-cards"> -->
    <!-- 轻容分厂能源信息 -->
    <!-- </div> -->
  </div>
</template>
  <!-- 引入 Element UI JS -->
  <script>
// 初始化Vue实例
import RingChart from "@/components/Echart/index.vue";
import LingChart from "@/components/LineChart/index.vue";
import BarChart from "@/components/barEchart/index.vue";
import ContentReal from "@/views/home/components/Realstatus";
export default {
  components: {
    RingChart,
    ContentReal,
    LingChart,
    BarChart,
  },
  data() {
    return {
      opstion: {},
      chartData2: {
        xAxis: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"],
        seriesData: [500, 300, 900, 400, 800, 200, 350, 850],
      },
      chartData1: {
        xAxis: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"],
        seriesData: [100, 600, 200, 300, 100, 1200, 500, 510], // 模拟数据，可替换为真实数据
      },
      chartData: [
        // { name: "", value: "4" },
      ],
      deviceData: [
        { name: "手工氩弧焊机", online: 0, total: 7, status: "standby" },
        { name: "气保焊机", online: 0, total: 5, status: "standby" },
        { name: "带极堆焊机", online: 0, total: 10, status: "standby" },
        { name: "等离子切割机", online: 0, total: 3, status: "standby" },
        { name: "空压机", online: 0, total: 2, status: "standby" },
      ],
    };
  },
  mounted() {
    // var myChart3 = echarts.init(document.getElementById("stats-item"));
  },
};
</script>
<style lang="less" scoped>
// @import "./css/home.css";
.chart-container {
  // display: flex;
  width: 7rem;
  height: 7rem;
  // margin-bottom: 1rem;
  // border: 1px solid #ebeef5;
  // border-radius: 8px;
  // padding: 20px;
  box-sizing: border-box;
}
</style>
